﻿// components/MainBackground.tsx
import {useEffect, useRef} from "react";

interface MainBackgroundProps {
    mode: "dark" | "light";
}

function MainBackground({mode}: MainBackgroundProps) {
    const canvasRef = useRef<HTMLCanvasElement>(null);
    
    useEffect(() => {
        const canvas = canvasRef.current;
        if (!canvas) return;
        
        const ctx = canvas.getContext('2d');
        if (!ctx) return;
        
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        
        // 赛博朋克风格颜色
        const colors = ["#ff00ff", "#00ffff", "#ff0080", "#00ff80", "#8000ff"];
        const getRandomColor = () => colors[Math.floor(Math.random() * colors.length)];
        
        // 星星数组
        const stars: Array<{
            x: number;
            y: number;
            radius: number;
            opacity: number;
            blinkSpeed: number;
        }> = [];
        
        // 创建星星
        for (let i = 0; i < 200; i++) {
            stars.push({
                x: Math.random() * canvas.width,
                y: Math.random() * canvas.height,
                radius: Math.random(),
                opacity: Math.random() * 0.8 + 0.2, // 初始透明度
                blinkSpeed: Math.random() * 0.02 + 0.01 // 闪烁速度
            });
        }
        
        // 粒子数组
        const particles: Array<{
            x: number;
            y: number;
            z: number;
            radius: number;
            color: string;
            opacity: number; // 粒子透明度
            speed: number; // 粒子速度
        }> = [];
        
        // 创建粒子
        for (let i = 0; i < 100; i++) {
            particles.push({
                x: Math.random() * canvas.width - canvas.width / 2,
                y: Math.random() * canvas.height - canvas.height / 2,
                z: Math.random() * 1000,
                radius: mode === "dark" ? 1 : 1.5, // 明亮模式下粒子更小
                color: getRandomColor(), // 随机赛博朋克颜色
                opacity: Math.random() * 0.5 + 0.5, // 初始透明度
                speed: Math.random() * 2 + 1 // 随机速度
            });
        }
        
        let animationFrameId: number;
        
        const animate = () => {
            // 清空画布
            ctx.fillStyle = mode === "dark" ? '#000000' : '#ffffff'; // 极夜模式为纯黑色背景
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            // 绘制星星
            stars.forEach((star) => {
                // 星星闪烁效果
                star.opacity += star.blinkSpeed;
                if (star.opacity > 1 || star.opacity < 0.2) {
                    star.blinkSpeed = -star.blinkSpeed;
                }
                
                ctx.beginPath();
                ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2);
                ctx.fillStyle = `rgba(255, 255, 255, ${star.opacity})`;
                ctx.fill();
            });
            
            // 绘制粒子
            particles.forEach((particle) => {
                // 粒子移动
                particle.z -= particle.speed;
                if (particle.z <= 1) {
                    particle.z = 1000;
                    particle.x = Math.random() * canvas.width - canvas.width / 2;
                    particle.y = Math.random() * canvas.height - canvas.height / 2;
                    particle.opacity = Math.random() * 0.5 + 0.5; // 重置透明度
                    particle.color = getRandomColor(); // 重置颜色
                }
                
                // 计算 2D 坐标
                const scale = 1000 / particle.z;
                const x2d = particle.x * scale + canvas.width / 2;
                const y2d = particle.y * scale + canvas.height / 2;
                
                // 绘制粒子
                if (
                    x2d >= 0 &&
                    x2d <= canvas.width &&
                    y2d >= 0 &&
                    y2d <= canvas.height
                ) {
                    const radius = particle.radius * scale;
                    ctx.beginPath();
                    ctx.arc(x2d, y2d, radius, 0, Math.PI * 2);
                    ctx.fillStyle = `rgba(${parseInt(particle.color.slice(1, 3), 16)}, ${parseInt(
                        particle.color.slice(3, 5),
                        16
                    )}, ${parseInt(particle.color.slice(5, 7), 16)}, ${particle.opacity})`;
                    ctx.fill();
                }
                
                // 逐渐降低透明度，实现轨迹消散
                particle.opacity -= 0.005;
                if (particle.opacity <= 0) {
                    particle.opacity = 0;
                }
            });
            
            animationFrameId = requestAnimationFrame(animate);
        };
        
        animate();
        
        const handleResize = () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        };
        
        window.addEventListener('resize', handleResize);
        
        return () => {
            cancelAnimationFrame(animationFrameId);
            window.removeEventListener('resize', handleResize);
        };
    }, [mode]);
    
    return (
        <canvas
            ref={canvasRef}
            className="fixed top-0 left-0 w-full h-full -z-10"
            style={{
                background: mode === "dark" ? '#000000' : '#eeeeee' // 极夜模式为纯黑色背景
            }}
        />
    );
}

export default MainBackground;